<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>分类管理</el-breadcrumb-item>
      <el-breadcrumb-item>分类列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <tree-table show-index index-text="#" :expand-type="false" :selection-type="false" :data="cateList" :columns="columns" border>
        <template slot="level" slot-scope="scope">
          <el-tag type="primary" v-if="scope.row.cate_level === 0">一级</el-tag>
          <el-tag type="success" v-else-if="scope.row.cate_level===1">二级</el-tag>
          <el-tag type="warning" v-else>三级</el-tag>
        </template>
        <template slot="set" slot-scope="scope">
          <el-button type="primary" size="mini" @click="geteditDialog(scope.row)">修改</el-button>
            <el-button type="danger" size="mini" @click="delCate(scope.row._id)">删除</el-button>
        </template>
      </tree-table>
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.page"
      :page-sizes="[2, 3, 4, 5]"
      :page-size="query.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </el-card>

    <el-dialog
    title="修改分类"
    :visible.sync="editDialogVisible"
    width="50%">
    <el-form :model="editForm" :rules="editRules" ref="editFormRef">
      <el-form-item label="分类名称" label-width="100px" prop="categoryname">
        <el-input v-model="editForm.categoryname"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="editDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="editCate">确 定</el-button>
    </span>
  </el-dialog>
  </div>
</template>

<script>
import {mapState, mapActions} from 'vuex'
export default {
  data(){
    return{
      columns:[
        {
          prop:"categoryname",
          label:"分类名称",
        },
        {
          label:"等级",
          type:'template',
          template:'level'
        },
        {
          label:"操作",
          type:'template',
          template:"set"
        }
      ],
      query:{
        page: 1,
        pagesize: 2
      },
      editDialogVisible: false,
      editForm:{
        categoryname: '',
        _id: ''
      },
      editRules:{
        categoryname:[{ required: true, message: '请输入分类名称', trigger: 'blur' }]
      }
    }
  },
  created(){
    this.getCate()
  },
  methods:{
    ...mapActions('cateAbout',['getCateData','editCateData','delCateData']),
    // 获取分类
    getCate(){
      this.getCateData(this.query)
    },
    // 每页多少条数据发生改变时触发
    handleSizeChange(newSize){
      this.query.pagesize = newSize || this.query.pagesize
      this.query.page = 1
      this.getCate()
    },
    // 页码发生改变时触发
    handleCurrentChange(newPage){
      this.query.page = newPage
      this.getCate()
    },
    // 通过_id删除分类(有bug,未消除)
    delCate(id){
      this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delCateData(id)
        this.getCate()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    // 打开编辑对话框
    geteditDialog(row){
      this.editForm.categoryname = row.categoryname
      this.editForm._id = row._id
      this.editDialogVisible = true
    },
    // 修改数据
    editCate(){
      this.$refs.editFormRef.validate(valid=>{
        if(valid){
          this.editCateData(this.editForm)
          this.getCate()
          this.editDialogVisible = false
        }
      })
    }
  },
  computed:{
    ...mapState('cateAbout',['cateList','total'])
  }
}
</script>

<style>

</style>